<template>
    <h3>ref组件选项 {{msg}} {{counter}}</h3>
</template>

<script>
  import {ref} from 'vue'

  export default {
    name: "02.ref组件选项",
    props: {
      msg: String
    },
    setup() {
      // 在 vue3 中, 我们可以使用 ref 函数, 使一个变量变成响应式, 在任何地方可以调用
      // ref 返回一个对象, 对象的 value 是我们传入的数据,可以通过这个 value 属性访问和修改其值
      // 其实,  ref 为我们的值创建了一个响应式引用。
      const counter = ref(0)
      console.log(counter);
      console.log(counter.value);

      setTimeout(() => {
        console.log(++counter.value); // 可以直接通过 value 这个属性修改
      }, 1000)
      return {
        counter
      }
    }
  }
</script>

<style scoped>

</style>
